<template>
    <div>
        <el-form :inline="true" :model="searchParam" class="demo-form-inline">
            <el-form-item>
                <el-input
                    clearable
                    v-model="searchParam.name"
                    placeholder="名称"
                />
            </el-form-item>
            <el-form-item style="width: auto">
                <el-button type="primary" @click="pageSearchCarousel" size="small">查询</el-button>
                <el-button type="primary" @click="addView(null,'add')" size="small">添加轮播图</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="data.carousels" border style="width: 100%" v-loading="data.loading"
                  element-loading-text="拼命加载中" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="70px"/>
            <el-table-column prop="name" label="名称" align="center" width="150px"/>
            <el-table-column prop="description" label="描述" align="center" width="150px"/>
            <el-table-column prop="disabled" label="是否禁用" align="center" width="150px">
                <template #default="scope">
                    <el-tag
                        :type="scope.row.disabled === false ? 'success' : 'warning'"
                        disable-transitions
                    >{{ scope.row.disabled === false ? "启用" : "禁用" }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column label="操作" width="350">
                <template #default="scope">
                    <el-button
                        class="button-space"
                        @click="addView(scope.row,'edit')"
                        type="info"
                        size="small"
                    >修改
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="enableCarousel(scope.row.uuid)"
                        v-if="scope.row.disabled"
                        type="success"
                        size="small"
                    >启用
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="disableCarousel(scope.row.uuid)"
                        v-if="!scope.row.disabled"
                        type="warning"
                        size="small"
                    >禁用
                    </el-button>
                    <el-popconfirm
                        title="你确定要删除该轮播图吗？"
                        confirm-button-text="是"
                        cancel-button-text="否"
                        @confirm="deleteCarousel(scope.row.uuid)"
                    >
                        <template #reference>
                            <el-button
                                class="button-space"
                                type="danger"
                                size="small"
                            >删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="data.total"
            style="text-align: center; margin-top: 10px"
            @current-change="currentChange"
        >
        </el-pagination>
        <!-- 添加或修改更新日志 -->
        <el-dialog
            v-model="data.carouselAddOrUpdateDisable"
            :title="data.title"
            width="60%"
            :before-close="handleClose"
        >
            <el-form :model="carouselAddOrUpdateData" :rules="rules" ref="addFormRef">
                <el-form-item label="名称" label-width="130px" prop="name">
                    <el-input v-model="carouselAddOrUpdateData.name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="描述" label-width="130px" prop="description">
                    <el-input v-model="carouselAddOrUpdateData.description" autocomplete="off" type="textarea"
                              :autosize="{minRows: 5, maxRows: 6}"/>
                </el-form-item>
                <el-form-item label="图片" label-width="130px" prop="url">
                    <el-upload
                        :show-file-list="false"
                        :action="data.uploadAction"
                        :limit="1"
                        :on-success="uploadSuccess"
                        :headers="{'AUTH_TOKEN':data.authToken}"
                        name="image"
                    >
                        <el-image style="width: 100px; height: 100px" :src="carouselAddOrUpdateData.url"
                                  fit="cover"/>
                    </el-upload>
                </el-form-item>
                <el-form-item label="是否禁用" label-width="130px" prop="disabled">
                    <el-select
                        clearable
                        v-model="carouselAddOrUpdateData.disabled"
                        placeholder="请选择是否禁用"
                    >
                        <el-option label="启用" :value="false"/>
                        <el-option label="禁用" :value="true"/>
                    </el-select>
                </el-form-item>
                <el-form-item label-width="130px">
                    <el-button @click="data.carouselAddOrUpdateDisable = false">取 消</el-button>
                    <el-button type="primary" @click="addOrUpdateCarousel">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {reactive, onMounted, ref} from "vue";
import {page, add, update, deleted, enable, disable} from "@/api/carousel/carousel";
import {basicData} from "@/utils/common";
import {ElMessage} from "element-plus";
import {getToken} from "@/utils/auth";

export default {
    setup() {
        const data = reactive({
            carousels: [],
            total: 0,
            carouselAddOrUpdateDisable: false,
            title: '',
            uploadAction: basicData.uploadUrl,
            authToken: getToken(),
            carouselUpdateUuid: ''
        })
        const searchParam = reactive({
            page: 1,
            size: 10,
            name: ''
        })
        const carouselAddOrUpdateData = reactive({
            name: '',
            description: '',
            url: '',
            disabled: ''
        })
        const rules = reactive({
            name: [
                {
                    required: true,
                    message: "请输入名称",
                    trigger: "blur",
                },
            ],
            description: [
                {
                    required: true,
                    message: "请输入描述",
                    trigger: "blur",
                },
            ],
            url: [
                {
                    required: true,
                    message: "请上传图片",
                    trigger: "blur",
                },
            ],
            disabled: [
                {
                    required: true,
                    message: "请选择是否禁用",
                    trigger: "blur",
                },
            ]
        })
        const addFormRef = ref(null)
        /**
         * 分页查询轮播图
         */
        const pageSearchCarousel = () => {
            page(searchParam).then(res => {
                data.carousels = res.data.records
                data.total = res.data.total
            })
        }
        const addView = (row, type) => {
            if (type === 'add') {
                data.title = '添加轮播图'
                reset();
            } else {
                data.title = '编辑轮播图'
                data.carouselUpdateUuid = row.uuid
                carouselAddOrUpdateData.name = row.name
                carouselAddOrUpdateData.description = row.description
                carouselAddOrUpdateData.url = row.url
                carouselAddOrUpdateData.disabled = row.disabled
            }
            data.carouselAddOrUpdateDisable = true
        }
        /**
         * 重置添加数据
         */
        const reset = () => {
            carouselAddOrUpdateData.name = ''
            carouselAddOrUpdateData.description = ''
            carouselAddOrUpdateData.url = ''
            carouselAddOrUpdateData.disabled = ''
        }
        /**
         * 图片上传成功后
         */
        const uploadSuccess = (response) => {
            if (response.code !== 0) {
                ElMessage({
                    message: response.msg,
                    type: 'danger',
                })
            } else {
                ElMessage({
                    message: '上传成功',
                    type: 'success',
                })
                carouselAddOrUpdateData.url = response.data
            }
        }
        /**
         * 添加或修改轮播图
         */
        const addOrUpdateCarousel = () => {
            addFormRef.value.validate((valid) => {
                if (!valid) {
                    return false
                }
                if (data.carouselUpdateUuid) {
                    // 修改
                    update(carouselAddOrUpdateData, data.carouselUpdateUuid).then(() => {
                        ElMessage({
                            message: '修改成功',
                            type: 'success',
                        })
                        data.carouselAddOrUpdateDisable = false
                        pageSearchCarousel()
                    })
                } else {
                    // 添加
                    add(carouselAddOrUpdateData).then(() => {
                        ElMessage({
                            message: '添加成功',
                            type: 'success',
                        })
                        data.carouselAddOrUpdateDisable = false
                        pageSearchCarousel()
                    })
                }
            })
        }
        /**
         * 删除轮播图
         * @param uuid
         */
        const deleteCarousel = (uuid) => {
            deleted(uuid).then(() => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                pageSearchCarousel()
            })
        }
        /**
         * 分页查询
         */
        const currentChange = (value) => {
            searchParam.page = value
            pageSearchCarousel()
        }
        /**
         * 启用轮播图
         * @param uuid
         */
        const enableCarousel = (uuid) => {
            enable(uuid).then(() => {
                ElMessage({
                    message: '启用成功',
                    type: 'success',
                })
                pageSearchCarousel()
            })
        }
        /**
         * 禁用轮播图
         * @param uuid
         */
        const disableCarousel = (uuid) => {
            disable(uuid).then(() => {
                ElMessage({
                    message: '禁用成功',
                    type: 'success',
                })
                pageSearchCarousel()
            })
        }
        onMounted(() => {
            pageSearchCarousel()
        })
        return {
            data,
            searchParam,
            carouselAddOrUpdateData,
            rules,
            addFormRef,
            addView,
            uploadSuccess,
            addOrUpdateCarousel,
            pageSearchCarousel,
            deleteCarousel,
            currentChange,
            enableCarousel,
            disableCarousel
        }
    }
}
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>